---
title: "Description List"
description: A semantic HTML component for displaying key-value pairs, perfect for structured data like product details or definitions.
order: 6
published: true
---

## Basic
A description list is typically used to display pairs of terms and details, like in invoices or product specifications, enhancing clarity and organization of information.
<How className="px-4" isCenter={false} toUse="surfaces/description-list/description-list-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/description-list
```
<SourceCode toShow='description-list' />

## Anatomy
```
import { DescriptionDetails, DescriptionList, DescriptionTerm } from "@/components/ui/description-list"
```
```
<DescriptionList>
  <DescriptionTerm>Invoice Number</DescriptionTerm>
  <DescriptionDetails>INV-12345</DescriptionDetails>
  <DescriptionTerm>Invoice Date</DescriptionTerm>
  <DescriptionDetails>September 21, 2024</DescriptionDetails>
</DescriptionList>
```

## Manual installation
<SourceCode toShow='description-list'/>

## With heading
This example shows with heading.
<How className="px-4" isCenter={false} toUse="surfaces/description-list/description-list-heading-demo" />

## With card
Sometimes, you may want to use a card to display the description list. This example shows how to do it.
<How className="px-4" isCenter={false} toUse="surfaces/description-list/description-list-card-demo" />
